import React, { Component } from 'react';

import "./icon.css"
import "./App.scss"
class App extends Component {
  getTotalPrice=(params)=>{
    let totalPrice =0;
    this.state.products.map((p)=>{
      if(p.checked){
        totalPrice+=p.num*p.price
      }
    })
    return totalPrice
  }
  getSelectNum=(params)=>{
    let select_num=0;
    this.state.products.map((p)=>{
      if(p.checked){
        select_num+=p.num
      }
    })
    return select_num
  }
  state={
    products:[
      {
        id:1,
        product_title:"男式经典基础牛津纺衬衫",
        img_url:"https://yanxuan-item.nosdn.127.net/1950dbc1fc540f6cdd8a345c6e48c6d8.png",
        price:129,
        origin_price:199,
        num:1,
        checked:true,
      },
      {
        id:2,
        product_title:"男式经典基础牛津纺衬衫",
        img_url:"https://yanxuan-item.nosdn.127.net/1950dbc1fc540f6cdd8a345c6e48c6d8.png",
        price:129,
        origin_price:199,
        num:1,
        checked:true,
      },
    ]
  }
  handleSub=(index)=>{
    console.log("执行handlesub",index)
    // todo: 优化 immutable.js 
    // 加判断库存是否满足加的条件
    let products=this.state.products
    --products[index].num
     // 边界减到0 的时候 提示用户是否要删除商品
     if (products[index].num==0) {
       alert("继续减下去就没了,老板")
       products.splice(index,1)
     }
    /* 重新渲染 */
    this.setState({
      products:products,
    })
  }
  handleAdd=(index)=>{
    console.log("执行handleadd",index)
    // todo: 优化 immutable.js 
    // 加判断库存是否满足加的条件
    let products=this.state.products
    ++products[index].num
    /* 重新渲染 */
    this.setState({
      products:products,
    })
  }
  render() {
    return (
      <div className="cart">
        {/* 购物小车的开始 */}
        <div className="cart_list">
          {this.state.products.map((p,index)=>{
            /* 
            https://www.sohu.com/a/341930812_120086979
            */
            return (
              <div className="cart_list_item" key={p.id}>
            <div className="cart_list_left">
              <i className="iconfont icon-yixuanzhong"></i>
            </div>
            <div className="cart-list-mid">
              <img src={p.img_url} alt=""/>
            </div>
            <div className="cart_list_right">
            <div className="list_right_top">
              {p.product_title}
            </div>
            <div className="list_right_bottom">
              <div className="right_bottom_l">
                <span className="price">¥{p.price}</span> <span className="origin_price">¥{p.origin_price}</span>
              </div>
              <div className="right_bottom_r">
                <span className="sub" onClick={this.handleSub.bind(this,index)}><i className="iconfont icon-jian"></i></span>
                <span className="num"> {p.num} </span>
                <span className="add" onClick={this.handleAdd.bind(this,index)}><i className="iconfont icon-hao"></i></span>
              </div>
            </div>            
          </div>
          </div>
            )
          })}
        </div>
        {/* 购物小车的结束 */}
        {/* 底部功能区的开始 */}
        <div className="cart_func">
          <div className="cart_func_left">
              <i className="iconfont icon-yixuanzhong"></i>
              <span>已选({this.getSelectNum()})</span>
          </div>
          <div className="cart_func_right">
            <div className="func_right_l">
              <div className="right_l_top">
                合计:¥{this.getTotalPrice()}
              </div>
              <div className="right_l_bottom">
                优惠:¥70
              </div>
            </div>
            <div className="func_right_r">
              下单
            </div>
          </div>
        </div>
        {/* 底部功能区的结束 */}
      </div>
    );
  }
}


export default App;


//要想将函数的返回值直接引用 {this.getTotalPrice()} 使用时,需要加"()"
// map有返回值,forEach没有返回值!